<template>
	<view class="my-address">
		<!-- 添加收货地址按钮 -->
		<view class="address-button" v-if="JSON.stringify(addressData) == '{}'">
			<button type="primary" size="mini" @click="getUserInfo">请选择收货地址+</button>
		</view>
		<!-- 收货地址信息 -->
		<view class="details" v-else @click="getUserInfo">
			<view class="details-top">
				<view class="name-message">
					收货人：{{addressData.userName}}
				</view>
				<view class="telephone-message">
					<text>电话：{{addressData.telNumber}}</text>
					<uni-icons type="arrowright" size="16" />
				</view>
			</view>
			<view class="details-bottom">
				<view class="address-message">
					收货地址：{{fullAdress}}
				</view>
			</view>
		</view>
		<!-- 下边框图片 -->
		<image src="../../static/cart_border@2x.png" class="bottom-img"></image>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from "vuex"
	export default {
		name: "my-address",
		data() {
			return {

			};
		},
		computed: {
			...mapState('m_user', ['addressData']),
			...mapGetters('m_user', ['fullAdress'])
		},
		methods: {
			...mapMutations('m_user', ['getUserAdress']),
			// 获得信息地址
			async getUserInfo() {
				const [err, res] = await uni.chooseAddress().catch(err => err);
				if (res && res.errMsg === 'chooseAddress:ok')
					this.getUserAdress(res);

				if (err && err.errMsg === 'chooseAddress:fail auth deny') {
					this.reAuth();
				}
			},
			// 重新授权
			reAuth() {
				uni.showModal({
					content: '检测到您没打开地址权限，是否去设置打开？',
					cancelText: '取消',
					confirmText: '确认',
					success(res) {
						// 确认授权
						if (res.confirm) {
							return uni.openSetting({
								success(res) {
									if (res.authSetting['scope.address']) {
										return uni.$showToast('授权成功！请选择地址')
									} else {
										return uni.$showToast('您取消了地址授权')
									}

								}
							})
						}
						// 取消授权
						else if (res.cancel) {
							return uni.$showToast('您取消了授权');
						}
					},
					// 失败回调，失败直接退出
					fail() {
						return
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.my-address {
		width: 100%;

		.address-button {
			height: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.details {
			padding: 25px 5px;
			box-sizing: border-box;
			font-size: 26rpx;

			.details-top {
				display: flex;
				justify-content: space-between;
				margin-bottom: 10px;

				.telephone-message {
					display: flex;
					align-items: center;
				}
			}
		}

		.bottom-img {
			display: block;
			width: 100%;
			height: 5px;
		}
	}
</style>
